import { ZRenderComp } from '../../../common/component/zrComp';

const VEHICLE_DEFAULT_FONT_SIZE = 24;

class VehicleTag extends ZRenderComp {
  /**
   * @param {{parent:ZRenderComp,x?:number,y?:number,vehicle:string,vehicleId?:string,
   * color:string,textColor?:string,path?:string,fontSize?:number}} args 
   */
  constructor(args) {
    super(args.parent);
    this.useExistZRenderInstance(args.zr, args.x || 0, args.y || 0);

    /** @type {string} */ this.vehicle = args.vehicle;
    /** @type {string} */ this.vehicleId = args.vehicleId;
    /** @type {string} */ this.color = args.color;
    /** @type {string} */ this.textColor = args.textColor || '#FFF';
    /** @type {string} */ this.path = args.path;
    /** @type {number} */ this.fontSize = args.fontSize || VEHICLE_DEFAULT_FONT_SIZE;
    this.width = 0;

    if (this.path == null) {
      this.drawRect();
    } else {
      this.drawPath();
    }
  }

  drawRect() {
    const {vehicle, vehicleId, color, fontSize, textColor} = this;
    const rectHeight = parseInt(fontSize * 1.2);
    const rectH2 = rectHeight/2;
    const scale = fontSize / VEHICLE_DEFAULT_FONT_SIZE;

    let spTx = this.spTx = this.createText(vehicle, fontSize)
      .textFill(textColor)
      .textStyle('left', 'center', 'bold', 'Arial Black')
      .z(0, 11)
      .position(parseInt(fontSize * 0.4), rectH2 + 2)
      .build();
    const { width : innerW } = spTx.getBoundingRect();

    // 内层
    this.spInner = this.createRect(innerW + parseInt(fontSize * 0.8), rectHeight, 0, 0, [rectH2, rectH2, rectH2, rectH2])
      .fill(color)
      .z(0, 10)
      .build();
    if (!vehicleId) {
      this.width = innerW + parseInt(fontSize * 0.8);
      return;
    }

    let spTx2 = this.spTx2 = this.createText(vehicleId, fontSize / 2)
      .textFill(color)
      .textStyle('left', 'top', 'italic', 'Arial Black')
      .z(0, 11)
      .position(innerW + 20 * scale, rectH2)
      .build();
    const { width : outerW } = spTx2.getBoundingRect();

    // 外层
    this.width = innerW + parseInt(fontSize * 1.2) + outerW;
    this.spOuter = this.createRect(this.width, rectHeight, 0, 0, [rectH2, rectH2, rectH2, rectH2])
      .fill(textColor)
      .stroke(color, parseInt(fontSize * 0.15))
      .z(0, 9)
      .build();
  }

  drawPath() {
    const {vehicle, vehicleId, color, fontSize, textColor, path} = this;
    const scale = fontSize / VEHICLE_DEFAULT_FONT_SIZE;

    let spInner = this.createPathFromString(path)
      .fill(color)
      .scale(scale)
      .z(0, 10)
      .build();
    this.spInner = spInner;
    let innerRect = spInner.getBoundingRect();
    const innerH = innerRect.height * scale;
    const innerY = innerRect.y * scale;
    const innerR = (innerRect.x + innerRect.width) * scale;

    let spTx = this.spTx = this.createText(vehicle, fontSize)
      .textFill(textColor)
      .textStyle('left', 'center', 'bold', 'Arial Black')
      .textStroke(color, parseInt(fontSize * 0.1))
      .z(0, 12)
      .position(parseInt(fontSize * 0.4), innerY + innerH / 2 + 2)
      .build();
    const { width : tx1W } = spTx.getBoundingRect();

    const im = parseInt(fontSize/4);
    const tx2X = tx1W + im * 4;
    const tx2Y = innerY + innerH / 2 + fontSize / 6 - 1;
    let spTx2 = this.spTx2 = this.createText(vehicleId, fontSize / 2)
      .textFill(color)
      .textStroke(textColor, parseInt(fontSize * 0.1))
      .textStyle('left', 'center', 'italic', 'Arial Black')
      .z(0, 12)
      .position(tx2X, tx2Y)
      .build();
    const { width : tx2W } = spTx2.getBoundingRect();
    this.width = Math.max(innerR, tx2X + tx2W);

    let spInner2 = this.spInner2 = this.createPathFromString(
      `M${tx2X-im},${tx2Y}l-${fontSize/4},${fontSize}h${tx2W+2*im}l${fontSize/2}-${2*fontSize}h-${tx2W+2*im}Z`)
      .fill(textColor)
      .z(0, 11)
      .build();
    let spClip = this.createPathFromString(path)
      .scale(scale)
      .defineAsClip()
      .build();
    spInner2.setClipPath(spClip);

    this.spOuter = this.createPathFromString(path)
      .fill('#FFF0')
      .scale(scale)
      .stroke(color, parseInt(fontSize * 0.15))
      .z(0, 11)
      .build();
  }

  changeColor(color, textColor) {
    this.color = color;
    this.textColor = textColor;

    this.spTx && this.spTx.style().textFill(textColor).update();
    this.spInner && this.spInner.style().fill(color).update();
    this.spTx2 && this.spTx2.style().textFill(color).update();
    this.spOuter && this.spOuter.style().fill(textColor).stroke(color, parseInt(this.fontSize * 0.15)).update();
  }
}

export {
  VehicleTag,
};
